<template >
    <div class='icons'>
    <swiper>
         <swiper-slide  v-for="(page,index) of pages" :key="page.id" > 
        <div class='icon' v-for="item of page" :key="item.id">
            <div class='icon-img'>
                    <img class='icon-img-content' :src="item.imgUrl" alt="">
            </div>
             <p class='icon-desc'>{{item.desc}}</p> 
        </div>
         </swiper-slide>  
       </swiper> 
    </div>
</template>

<script>
export default {
    name:'HomeIcons',
    data(){
        return {
            iconList:[
                {
                    id:'001',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'热门景点aaaaaaaaaaaaaaaa'
                },
                 {
                    id:'002',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'热门景点'
                },
                 {
                    id:'003',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'热门景点'
                },
                 {
                    id:'004',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'热门景点'
                }, {
                    id:'005',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'国外景点'
                }
                , {
                    id:'006',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'热门景点'
                }
                , {
                    id:'007',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'一日游'
                }
                , {
                    id:'008',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'滑雪'
                },
                 {
                   id:'009',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'热门景点'
                },
                {
                    id:'010',
                    imgUrl:'https://qcommons.qunar.com/headshot/headshotsById/287992373.png?l&ssl=true',
                    desc:'热门景点'
                }

            ]
        }
    },
    computed:{
        pages(){
            const pages=[];
            this.iconList.forEach( (item,index)=>{
            const page=Math.floor(index/8);
            if(!pages[page]){
                pages[page]=[];
            }
            pages[page].push(item)
            })
            return  pages
        }
    }
}
</script>
<style lang="stylus" scoped>
@import  '~styles/mixins.styl'
    .icons >>> .swiper-container
        height:0
        padding-bottom:50%
       
    .icon 
        overflow:hidden
        width:25%
        float:left
        padding-bottom:25%
        height:0
        position:relative;
        .icon-img
            position: absolute;
            right:0
            left:0
            top:0
            bottom:0.44rem 
            box-sizing:border-box
            padding:0.1rem
            .icon-img-content 
                height:100%
                display:block
                margin:0 auto
        .icon-desc
            position: absolute;
            right:0
            left:0
            bottom:0
            height:0.44rem
            text-align:center
            line-height:0.44rem
            color:#333
            ellipsis()
           

                    



</style>